import { computed } from 'vue';
<template>
  <div class="cardContainer" :radius="props.radius">
    <div class="cardTop" v-show="props.HasSup">
      <h1>{{ props.title }}</h1>
      <span @click="clickBtn">ClickMe</span>
    </div>
    <div class="cardBottom" :class="classes">
      <div class="List" v-for="val in props.List">{{ val }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
// Card组件接收不同的props 为表现不同的组件样式
const props = defineProps({
  title: { type: String, default: "TileName" },
  Func: { type: Function },
  List: { type: Object },
  HasSup: { type: Boolean, default: true },
  radius: { type: Boolean, default: false },
  // position设置内容的对其方式 左中右
  position: { type: String, default: "left" },
});

// const classes = computed(() => {
//   return {
//     [`szy-theme-${props.position}`]: props.position,
//   };
// });

const classes = computed(() => {
  return [`szy-theme-${props.position}`];
});

console.log(props.position);

const clickBtn = () => {
  // 执行props接收到的函数
  // 需要用as断言为函数类型
  (props.Func as Function)();
};
</script>

<style scoped lang="scss">
.cardContainer {
  border: 1px solid rgb(206, 204, 204);
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  margin-bottom: 40px;

  // 前面拼接&的属性选择器 当.cardContainer[radius="true"]的时候下面样式才生效
  // 而.cardContainer的radius是来自props.radius
  &[radius="true"] {
    border-radius: 60px;
  }

  // 这里不需要在类选择器前写& 没有必要 因为scss嵌套本来就会拼接嵌套的选择器
  .cardTop {
    font-size: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    border-bottom: 1px solid rgb(206, 204, 204);
    align-items: center;
    padding: 20px 70px;
  }
  span {
    color: blue;
  }
  .cardBottom {
    padding: 20px 30px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    .List {
      border-radius: 20px;
      font-size: 18px;
      margin: 10px;
      border: 1px solid rgb(206, 204, 204);
      padding: 10px 20px;
    }
  }
  .szy-theme-left {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  .szy-theme-center {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
  }
  .szy-theme-right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-end;
  }
}
</style>
